<template>
  <div class="text-xl font-bold mb-6">
    <i class="iconfont icon-bullhorn " style="font-size:20px;"></i> 商品推广
  </div>
  <div class="grid grid-cols-3 gap-4 mb-6">
    <div class="service-card">
      <div class="text-xl font-bold mb-6">产品推广服务</div>
      <div class="text-[15px] opacity-90 mb-6 leading-[1.6]">
        开通产品推广服务，让您的商品获得更多曝光和流量，提升销售额
      </div>
      <button class="btn btn-primary" @click="openServiceDialog = true">
        <i class="iconfont icon-rocket1"></i> 立即开通
      </button>
    </div>
    <div class="card">
      <div class="card-header">
        <div class="card-title"><i class="iconfont icon-chart-line"></i> 推广效果</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">总曝光量</div>
        <div class="stat-value">128,456</div>
        <div class="stat-change up">
          <i class="iconfont icon-arrow-up"></i>
          12.5% 较上月
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <div class="card-title">
          <i class="iconfont  icon-shopping-cart"></i> 转化数据
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-title">点击转化率</div>
        <div class="stat-value">4.35%</div>
        <div class="stat-change up">
          <i class="iconfont icon-arrow-up"></i>
          3.2% 较上月
        </div>
      </div>
    </div>
  </div>
  <!-- 产品推广管理 -->
  <div class="card">
    <div class="card-header">
      <div class="card-title"><i class="iconfont icon-box-open"></i> 产品推广管理</div>
      <div class="card-action" @click="openNewProductDialog = true">
        <i class="iconfont icon-plus"></i> 添加推广产品
      </div>
    </div>
    <!-- 产品列表 -->
    <div class="product-list">
      <div class="product-item">
        <div class="product-image">
          <img src="https://ai-public.mastergo.com/ai/img_res/502b3d02a9364e9ae6bea23900f58f07.jpg" alt="" />
        </div>
        <div class="product-info">
          <div class="product-name">月月红6169</div>
          <div class="product-meta">
            <span>推广ID: PROD-2023-056</span>
            <span>每日预算: ¥200</span>
            <span>点击单价: ¥1.25</span>
          </div>
        </div>
        <div class="product-status status-active">
          <i class="iconfont icon-playcircle-fill"></i> 推广中
        </div>
      </div>

      <div class="product-item">
        <div class="product-image">
          <img src="https://ai-public.mastergo.com/ai/img_res/484baa432db12432c73d7bf3f748e775.jpg" alt="" />
        </div>
        <div class="product-info">
          <div class="product-name">黑美高802-2</div>
          <div class="product-meta">
            <span>推广ID: PROD-2023-042</span>
            <span>每日预算: ¥150</span>
            <span>点击单价: ¥0.98</span>
          </div>
        </div>
        <div class="product-status status-paused">
          <i class="iconfont icon-pause-circle"></i> 已暂停
        </div>
      </div>

      <div class="product-item">
        <div class="product-image">
          <img src="https://ai-public.mastergo.com/ai/img_res/9d175950ed08fa99ab8c23e9d7a6615c.jpg" alt="" />
        </div>
        <div class="product-info">
          <div class="product-name">红金鱼6362</div>
          <div class="product-meta">
            <span>推广ID: PROD-2023-031</span>
            <span>每日预算: ¥180</span>
            <span>点击单价: ¥1.45</span>
          </div>
        </div>
        <div class="product-status status-active">
          <i class="iconfont icon-playcircle"></i> 推广中
        </div>
      </div>
    </div>
  </div>
  <!-- 开通服务对话框 -->
  <el-dialog v-model="openServiceDialog" title="开通产品推广服务">
    <div class="p-6">
      <div class="mb-6">
        <h3 class="font-bold text-lg mb-3">选择推广套餐</h3>
        <div class="grid grid-cols-3 gap-4">
          <div class="border rounded-lg p-4 text-center cursor-pointer hover:border-blue-500">
            <div class="font-bold text-lg mb-2">基础版</div>
            <div class="text-3xl font-bold text-blue-500 mb-2">¥999</div>
            <div class="text-sm text-gray-500 mb-4">每月</div>
            <ul class="text-sm text-left space-y-2 mb-4">
              <li>
                <i class="iconfont icon-check text-green-500 mr-2"></i> 最多5个产品
              </li>
              <li>
                <i class="iconfont icon-check text-green-500 mr-2"></i>
                每日预算¥200
              </li>
              <li>
                <i class="fas fa-times text-gray-300 mr-2"></i> 高级数据分析
              </li>
            </ul>
            <button class="w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
              选择
            </button>
          </div>
          <div class="border-2 border-blue-500 rounded-lg p-4 text-center cursor-pointer bg-blue-50 relative">
            <span class="absolute top-0 right-0 bg-blue-500 text-white text-xs px-2 py-1 rounded-bl">推荐</span>
            <div class="font-bold text-lg mb-2">专业版</div>
            <div class="text-3xl font-bold text-blue-500 mb-2">¥1,999</div>
            <div class="text-sm text-gray-500 mb-4">每月</div>
            <ul class="text-sm text-left space-y-2 mb-4">
              <li>
                <i class="iconfont icon-check text-green-500 mr-2"></i>
                最多20个产品
              </li>
              <li>
                <i class="iconfont icon-check text-green-500 mr-2"></i>
                每日预算¥500
              </li>
              <li>
                <i class="iconfont icon-check text-green-500 mr-2"></i>
                高级数据分析
              </li>
            </ul>
            <button class="w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
              选择
            </button>
          </div>
          <div class="border rounded-lg p-4 text-center cursor-pointer hover:border-blue-500">
            <div class="font-bold text-lg mb-2">企业版</div>
            <div class="text-3xl font-bold text-blue-500 mb-2">¥3,999</div>
            <div class="text-sm text-gray-500 mb-4">每月</div>
            <ul class="text-sm text-left space-y-2 mb-4">
              <li>
                <i class="iconfont icon-check text-green-500 mr-2"></i> 无限制产品
              </li>
              <li>
                <i class="iconfont icon-check text-green-500 mr-2"></i> 无预算限制
              </li>
              <li>
                <i class="iconfont icon-check text-green-500 mr-2"></i>
                专属客户经理
              </li>
            </ul>
            <button class="w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
              选择
            </button>
          </div>
        </div>
      </div>

      <div class="border-t pt-4">
        <h3 class="font-bold text-lg mb-3">服务说明</h3>
        <ul class="text-sm text-gray-600 space-y-2">
          <li>
            <i class="iconfont icon-check-circle text-green-500 mr-2"></i>
            按点击付费(CPC)，精准控制推广成本
          </li>
          <li>
            <i class="iconfont icon-check-circle text-green-500 mr-2"></i>
            智能投放算法，提升推广效果
          </li>
          <li>
            <i class="iconfont icon-check-circle text-green-500 mr-2"></i>
            实时数据监控，随时调整策略
          </li>
          <li>
            <i class="iconfont icon-check-circle text-green-500 mr-2"></i>
            专业顾问团队，提供优化建议
          </li>
        </ul>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="openServiceDialog = false">取消</el-button>
        <el-button type="primary" @click="openServiceDialog = false">确认开通</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 添加推广产品的弹窗 -->
  <!-- 添加产品对话框 -->
  <el-dialog v-model="openNewProductDialog" title="添加推广产品">
    <div class="p-6">
      <div class="grid grid-cols-2 gap-6">
        <div>
          <div class="mb-4">
            <label class="block text-sm font-medium mb-2">选择产品</label>
            <div
              class="border rounded-lg p-4 text-center cursor-pointer hover:border-blue-500 h-40 flex items-center justify-center">
              <div>
                <i class="fas fa-box text-3xl text-gray-400 mb-2"></i>
                <p>从商品库选择</p>
              </div>
            </div>
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium mb-2">推广预算 (元/天)</label>
            <input type="number" class="w-full border rounded-lg p-3" placeholder="输入每日预算" value="200" />
          </div>
        </div>

        <div>
          <div class="mb-4">
            <label class="block text-sm font-medium mb-2">推广出价 (元/点击)</label>
            <input type="number" class="w-full border rounded-lg p-3" placeholder="输入每次点击出价" value="1.25" />
            <p class="text-xs text-gray-500 mt-2">
              系统建议出价范围: ¥0.80 - ¥1.50
            </p>
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium mb-2">推广时间</label>
            <div class="flex gap-2">
              <input type="date" class="w-full border rounded-lg p-3" />
              <input type="date" class="w-full border rounded-lg p-3" />
            </div>
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium mb-2">推广人群</label>
            <div class="flex flex-wrap gap-2">
              <span class="tag tag-primary">18-30岁</span>
              <span class="tag tag-primary">一线城市</span>
              <span class="tag tag-primary">科技爱好者</span>
              <span class="tag tag-primary">+ 添加</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="openNewProductDialog = false">取消</el-button>
        <el-button type="primary" @click="openNewProductDialog = false">确认添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
//服务弹框
const openServiceDialog = ref(false);
//
const openNewProductDialog = ref(false);
</script>
<style lang="less" scoped>
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.card-title i {
  margin-right: 10px;
  color: #3b82f6;
}

.card-action {
  color: #3b82f6;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
/* 推广服务卡片 */
.service-card {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  color: white;
  border-radius: 12px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.service-card::after {
  content: "";
  position: absolute;
  bottom: -80px;
  right: -30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
/* 数据统计卡片 */
.stat-card {
  display: flex;
  flex-direction: column;
}

.stat-title {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1f2937;
}

.stat-change {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.stat-change.up {
  color: #10b981;
}

.stat-change.down {
  color: #ef4444;
}
/* 按钮样式 */
.btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary {
  background: #3b82f6;
  color: white;
  z-index: 10;
  position: relative;
}
.btn-primary:hover {
  background: #2563eb;
}
.btn-outline {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #4b5563;
}
.btn-outline:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}
/* 产品推广列表 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 10px;
  background: #f9fafb;
  transition: all 0.3s;
  border: 1px solid #e5e7eb;
}

.product-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-color: #d1d5db;
}

.product-image {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  background: linear-gradient(45deg, #6b7280, #9ca3af);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  margin-right: 16px;
  flex-shrink: 0;
}

.product-info {
  flex: 1;
}

.product-name {
  font-weight: 600;
  margin-bottom: 6px;
  color: #1f2937;
}

.product-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #6b7280;
}

.product-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.status-paused {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.status-ended {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* 标签样式 */
.tag {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag-primary {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.tag-success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
</style>
